<template>
<div class="d-flex">
  <div class="d-flex align-items-center range-container">
    <button @click="add" class="btn-add"></button>
    <input type="range" v-model="range" min="0" max="100" class="col">
    <button @click="sbu" class="btn-sbu"></button>
  </div>
</div>
</template>
<script>
export default {
  title: "测试2",
  data() {
    return {
      range: 0
    }
  },
  methods: {
    add() {
      if (this.range < 100) {
        this.range += 1
      }
    },
    sbu() {
      if (this.range > 0) {
        this.range -= 1
      }
    }
  }
}
</script>
<style lang="scss">
  .range-container {
    transform: rotate(90deg);
    .btn-add {
      position: relative;
      border: none;
      border-radius: 10px 0 0 10px;
      color: #5386BF;
      font-size: 20px;
      font-weight: bold;
      width: 25px;
      height: 25px;
      &::before {
        content: "+";
        position: absolute;
        top: 50%;
        height: 15px;
        top: -5px;
        left: 5px;
      }
    }
    .btn-sbu {
      position: relative;
      border: none;
      border-radius: 0 10px 10px 0;
      color: #5386BF;
      font-size: 12px;
      font-weight: bold;
      vertical-align: middle;
      text-align:center;
      width: 25px;
      height: 25px;
      &::before {
        content: "|";
        position: absolute;
        top: 50%;
        height: 15px;
        top: 0px;
        left: 10px;
      }
    }
  }
</style>